<script>
import { reactive, toRefs } from "@vue/reactivity";
import { Toast } from "vant";
import { Dialog } from "vant";
import { onBeforeUnmount } from "@vue/runtime-core";

export default {
  setup() {
    let list = reactive({
      maknei: 0,
      yuan: 0,
      Gold_coin: null,
      Pricedata:null
    });

    //金币收益明细
    let makneidata = JSON.parse(localStorage.getItem("historypro"));
    if (makneidata && makneidata.length) {
      list.Gold_coin = makneidata;
    } else {
      list.Gold_coin;
    }
    

    //获取金币收益明细
    let makneilist = JSON.parse(localStorage.getItem("maknei"));
    if (makneilist) {
      list.maknei = makneilist;
    } else {
      list.maknei = 0;
    }

    // 提现金额收益
    let Price_list = JSON.parse(localStorage.getItem('Price'))
    if (Price_list && Price_list.length) {
      list.Pricedata = Price_list
    }else{
      list.Pricedata
    }







    let yuanlist = JSON.parse(localStorage.getItem("yuan"));
    if (yuanlist) {
      list.yuan = Math.round(yuanlist * 100) / 100;
    } else {
      list.yuan = 0;
    }

        // 时间戳计算时间
      let data = new Date();
      let timenum = data.getTime;
      let Y = data.getFullYear();
      let M = data.getMonth() + 1;
      M = M < 10 ? "0" + M : M;
      let D = data.getDate();
      D = D < 10 ? "0" + D : D;
      let h = data.getHours();
      h = h < 10 ? "0" + h : h;
      let m = data.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = data.getSeconds();
      s = s < 10 ? "0" + s : s;
      let time = Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;



    //兑换现金
    let exchangenFun = () => {
      Dialog.confirm({
        title: "标题",
        message:
          "金币以1000:1的规格来进行兑换，将兑换到" +
          Math.round((list.maknei / 10000) * 100) / 100 +
          "元，是否继续兑换",
      })
        .then(() => {
          if (list.maknei != 0) {
            conFun();
          }else{
            Toast.fail('你现在的金币为0，不能进行兑换');
          }
        })
        .catch(() => {});
    };

    //提现金额
    let WithdrawalFun = () => {
      Dialog.confirm({
        title: "标题",
        message:
          "即将提现支付宝账号，是否继续进行",
      })
        .then(() => {
          if (list.yuan !=0) {
            Price()
          }else{
            Toast.fail('你现在的提现金额为0元，不能进行提现');
          }
        })
        .catch(() => {
          // on cancel
        });
    };


    let Price = () =>{
      let Pricelist = JSON.parse(localStorage.getItem('Price'))
       let timelist = [];
      timelist.push({
        emid: timenum,
        datetime: time,
        name: "提现金额",
        num: list.yuan,
        flag: false,
      });
      if (Pricelist && Pricelist.length) {
        Pricelist.push(timelist[0])
        localStorage.setItem('Price',JSON.stringify(Pricelist))
      }else{
       localStorage.setItem('Price',JSON.stringify(timelist))
      }
      list.yuan = 0
      Toast.success("提现成功，现在将在24小时内发放现金");
    }










    // 兑换金额
    let conFun = () => {
      list.yuan = list.maknei / 10000 + Number(list.yuan);
      let historylist = JSON.parse(localStorage.getItem("historypro"));
  
      let timelist = [];
      timelist.push({
        emid: timenum,
        datetime: time,
        name: "金币兑换现金",
        num: list.maknei,
        flag: false,
      });
      if (historylist && historylist.length) {
        historylist.push(timelist[0]);
        localStorage.setItem("historypro", JSON.stringify(historylist));
      } else {
        localStorage.setItem("historypro", JSON.stringify(timelist));
      }

        let Priceitems = JSON.parse(localStorage.getItem('Price'))
        let amount_money = [];
          amount_money.push({
            emid: timenum,
            datetime: time,
            name: "金币兑换的现金",
            num: Math.round(list.yuan * 100) /100,
            flag: true,
          });
      if (Priceitems && Priceitems) {
        Priceitems.push(amount_money[0])
        localStorage.setItem('Price',JSON.stringify(Priceitems))
      }else{
        localStorage.setItem('Price',JSON.stringify(amount_money))
      }



      list.maknei = 0;
      Toast.success("兑换成功，现在将在24小时内发放");
    };

    onBeforeUnmount(() => {
      localStorage.setItem("yuan", JSON.stringify(list.yuan));
      localStorage.setItem("maknei", JSON.stringify(list.maknei));
    });

    const onClickLeft = () => history.back();
    const onClickRight = () => Toast("说明");
    return {
      ...toRefs(list),
      onClickLeft,
      onClickRight,
      exchangenFun,
      WithdrawalFun,
    };
  },
};
</script>
<template>
  <div class="cash">
    <div class="head">
      <van-nav-bar
        title="兑换"
        right-text="说明"
        left-arrow
        :fixed="true"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />

      <van-tabs v-model:active="active" animated>
        <van-tab title="金币">
          <div class="box">
            <div class="hezi">
              <li>我的金币 (个)</li>
              <div class="num">
                <div class="left">{{ maknei }}</div>
                <div class="right" @click="exchangenFun">兑换</div>
              </div>
              <p>
                当日获得金币次日14点前自动兑换现金1000金币~0.1元金币每满0.01元可兑换，不足部分累计到次日兑换
              </p>
            </div>
            <ul>
              <h4>收益明细</h4>
              <main v-if="Gold_coin">
                <li v-for="item in Gold_coin" :key="item.datetime">
                  <div class="left">
                    <p>{{item.name}}</p>
                    <div>{{item.datetime}}</div>
                  </div>
                  <div class="right" v-if="item.flag">+22</div>
                  <div class="right1" v-if="!item.flag">-{{ item.num}}</div>
                </li>
              </main>
            </ul>
          </div>
        </van-tab>
        <van-tab title="现金">
          <div class="box box1">
            <div class="hezi">
              <li>我的现金 (元)</li>
              <div class="num">
                <div class="left">{{ yuan }}</div>
                <div class="right" @click="WithdrawalFun">提现</div>
              </div>
              <p>现金可提现到支付宝,30天未登录现金账户将被清零</p>
            </div>
            <ul>
              <h4>收益明细</h4>
              <main v-if="Pricedata">

              <li v-for="item in Pricedata" :key="item.datetime">
                <div class="left">
                  <p>{{item.name}}</p>
                  <div>{{item.datetime}}</div>
                </div>
                <div class="right" v-if="item.flag">+{{item.num}}</div>
                <div class="right1" v-if="!item.flag">-{{item.num}}</div>
              </li>
              </main>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style lang="scss" scoped>
:deep {
  .van-nav-bar .van-icon {
    color: #333;
  }
  .van-nav-bar__text {
    color: #333;
  }
  .van-tabs__line {
    bottom: 20px;
    width: 20px;
    background-color: #00b17f;
  }
}
.cash{
  padding-top: 46px;
}
.box {
  padding: 0 15px ;
  .hezi {
    color: #fff;
    border-radius: 8px;
    background-color: #fe804d;
    padding: 20px 15px;
    li {
      font-size: 14px;
      padding-bottom: 10px;
    }
    .num {
      display: flex;
      margin-bottom: 20px;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 26px;
      }
      .right {
        padding: 3px 15px;
        border-radius: 8px;
        border: 1px solid #fc9e82;
        font-size: 14px;
      }
    }
    p {
      font-size: 13px;
    }
  }
  ul {
    padding-top: 30px;
    li {
      margin-top: 27px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 13px;
        color: #86868a;
        p {
          font-size: 15px;
          color: #0c0b0c;
          margin-bottom: 5px;
        }
      }
      .right {
        color: #f79804;
      }
      .right1 {
        color: #76757b;
      }
    }
  }
}
.box1 {
  .hezi {
    background-color: #feb91d;
  }
}
</style>